<template>
	<view style="display: flex; flex-direction: column;width: 100vw; height: 100vh">
		<view class="headerFixed">
			<view class="header" :style="{height:videoHeight}">
				<cover-view v-if="fullType==2" class="rightV">
					<cover-view class="auto" :class="{'autoActive':fitType=='fill'}" @tap.stop.prevent="onAutoAction">AUTO</cover-view>
					<!-- <cover-image src="https://statics.xmcsrv.net/weixin/video-fullscreen.png" class="img" @tap.stop.prevent="onfullScreenAction"></cover-image> -->
				</cover-view>
				<!-- <cover-view class="fullToolBar" v-if="isFullScreen&&isTap&&fullType==2">
					<cover-image class="img"  :src="toolList[0].src" @tap.stop.prevent="clickTool(0)"></cover-image>
					<cover-image class="img" :src="toolList[1].src" @tap.stop.prevent="clickTool(1)"></cover-image>
				</cover-view> -->
				<image v-if="!currentVideo.url" src="https://statics.xmcsrv.net/weixin/noVideo.png" style="width: 120rpx;height: 120rpx;"></image>
				<video v-if="currentVideo.url"  :custom-cache="true" id="video" style="width: 100%;height: 550rpx;" :style="{height:videoHeight}"  :muted="isMuted" :src="currentVideo.url" :autoplay="true" :show-fullscreen-btn="isShowFullScreen" :object-fit="fitType" :direction="direction" @ended="ended" @pause="onPause2" @play="onPlay2" @fullscreenchange="fullscreenchange" @tap="tapScreen"></video>
			</view>
			<view class="toolBar u-f-r">
				<view class="imgV u-f-ajc" v-for="(item,index) in toolList" :key="index" @click="clickTool(index)">
					<!-- <button v-if="index==2" open-type="share" class="jf-button">
						<image :src="item.src"></image>
					</button> -->
					<view class="" v-if="index==0">
						<image v-if="isMuted" src="https://statics.xmcsrv.net/weixin/soundoff3.png" mode=""></image>
						<image v-else src="https://statics.xmcsrv.net/weixin/soundon2.png" mode=""></image>
					</view>
					<image v-else :src="item.src" style="width: 70rpx;height: 70rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- <view v-if="playBackUrlList.length == 0" class="u-f-ajc u-f-c noData">
			<uni-icons custom-prefix="iconfont" type="icon-kong" size="64"></uni-icons>
			<view>暂无录像</view>
		</view> -->

		<scroll-view :scroll-x="true" class="video-list" >
			<template v-if="!isFullScreen&&playBackUrlList.length > 0">
				<view class="video" v-for="(item,index) in playBackUrlList" :key="index">
					<view class="video-control">
						<image class="bgPic" src="https://statics.xmcsrv.net/weixin/defaultMsgBg2.png"  mode="scaleToFill"></image>
						<view class="time">{{item.StartTime.split(' ')[1]}}</view>
						<image class="pic" :src="item.imageUrl" mode="aspectFit"></image>
						<view v-if="!item.selected"  style="z-index: 5;">
							<uni-icons
								custom-prefix="iconfont" 
								type="icon-bofang1" 
								size="36" 
								color="#999999"
								@click="itemClick(item)"
							></uni-icons>
						</view>
						<view v-else style="z-index: 5;">
							<uni-icons 
							v-if="item.status == 1"
							custom-prefix="iconfont" 
							type="icon-zanting2" 
							size="36" 
							color="#999999" 
							@click="onPause(item)"
							></uni-icons>
							<uni-icons
							v-if="item.status == 0"
							custom-prefix="iconfont" 
							type="icon-bofang1" 
							size="36" 
							color="#999999" 
							@click="onPlay(item)"
							></uni-icons>
						</view>
						<view style="position: absolute; bottom: 10rpx; font-size: 18rpx; text-align: center;">{{item.EndTime}}</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="video-nothing">
					<uni-icons custom-prefix="iconfont" type="icon-kong" size="64"></uni-icons>
					<view>无录像</view>
				</view>
			</template>
		</scroll-view>
		<!-- <view v-if="!isFullScreen&&playBackUrlList.length>0" class="step">
			<view class="con">
				<view class="itemList u-f-c">
					<view class="u-f-ac item" v-for="(item,index) in playBackUrlList" :key="index" @click="itemClick(item)">
						<view class="step-line step-line--before" :style="{background:item.selected?'#FF0025':'#D9D9D9'}"></view>
						<view class="u-f-c">
							<text class="time">开始:{{item.StartTime}}</text>
							<text class="time" style="margin-top: 10rpx;">结束:{{item.StopTime}}</text>
						</view>
						<view class="" style="position: relative;">
							<image class="pic" :src="item.imageUrl"></image>
							<image class="play" src="https://statics.xmcsrv.net/weixin/play.png"></image>
						</view>
					</view>
				</view>
				<view class="step-container">
					<view class="step-line-item">
						<view class="step-line step-line--after"></view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="rule">
			<j-ruler :isTime="true" :timeList="rulerList" @post-NumValue="rulerNum" :maxNum="1440" pointerColor="red"></j-ruler>
		</view> -->
		<view v-if="!isFullScreen" class="u-f-ajc calendar" @click="openCalendar">
			<image src="https://statics.xmcsrv.net/weixin/calendar.png" mode=""></image>
			<text>{{date}}</text>
		</view>
		<!-- <uni-datetime-picker v-model="date" type="date">
			<view class="u-f-ajc calendar">
				<image src="/static/images/calendar.png" mode=""></image>
				<text>{{date}}</text>
			</view>
		</uni-datetime-picker> -->
		<!-- <view class="u-f-c bottom">
			<view class="u-f-r"> 
				<image src="" mode=""></image>
				<text>普通录像</text>
			</view>
			<view class="u-f-sbc">
				<view class="u-f-r">
					<image src="" mode=""></image>
					<text>报警录像</text>
				</view>
				<uni-segmented-control style="width: 200rpx;" :current="current" :values="items" style-type="button" active-color="#FF0025" @clickItem="onClickItem" />
			</view>
		</view> -->
		<uni-calendar ref="calendar" class="uni-calendar--hook" :isShowExtra="false" :selected="info.selected" :date="date" :showMonth="false" :clear-date="true" :insert="false" @confirm="confirm"/>
	</view>
</template>

<script>

	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)
	
		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
	
		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	const { getDiffDay } = require('@/utils/util.js');
	export default {
		data() {
			return {
				isOncePlay:0,
				current:0,
				items: ['小时','分钟'],
				isFullScreen:false,
				videoHeight:'526rpx',
				device: {},
				videoContext: null,
				playBackUrlList: [],
				currentVideo: {
					key: '',
					url: ''
				},
				// toolList:[{src:'https://statics.xmcsrv.net/weixin/soundoff1.png',id:0},{src:'https://statics.xmcsrv.net/weixin/toolIcon1-1.png',id:1},{src:'https://statics.xmcsrv.net/weixin/toolIcon2.png',id:2},{src:'https://statics.xmcsrv.net/weixin/toolIcon4.png',id:3}],
				toolList:[{src:'https://statics.xmcsrv.net/weixin/soundoff1.png',id:0},{src:'https://statics.xmcsrv.net/weixin/toolIcon1-1.png',id:1},{src:'https://statics.xmcsrv.net/weixin/toolIcon4.png',id:3}],
				date:new Date(),
				single:'',
				maxNum:1440,
				rulerList:[],
				info:{
					selected:[]
				},
				list: [],
				isMuted:true,
				isPlay:false,
				fullType:1, //1 是门锁  2是球机、门铃之类的
				direction:0,//设置全屏时视频的方向
				isShowFullScreen:false,
				fitType:'contain',//fill
				isTap:true,
				scorllTop:'720rpx',

			}
		},
		onLoad: function(options) {
			let enData = decodeURIComponent(options.device)
			this.device = JSON.parse(enData);
			this.date = new Date().toJSON().split('T')[0]
			this.getVideoList()
			uni.setNavigationBarTitle({
				title: this.device.deviceName
			});
			console.log('msgDetail === ',this.device);
			let constant = getApp().globalData.constant;
			if(this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK||this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK2 ||this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK3 ||this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK4 || this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK5 || this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK6 || this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK7 ||this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK8 || this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK9 || this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK10 ||this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK11 ||this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK12 || this.device.parentPid === constant.DEVICE_TYPE.EE_DEV_SMARTDOORLOCK13){
				this.fullType = 1
				this.isShowFullScreen = true
			}else{
				this.fullType = 2
				this.isShowFullScreen = false
				this.toolList.splice(3,1)
				console.log('this.toolList=====',this.toolList);
			}
			console.log('设备类型',this.fullType);
			
			this.videoContext = uni.createVideoContext('video')
			console.log('视频对象====',this.videoContext,this.videoHeight);
			// this.info.selected = [{
			// 		date: getDate(new Date(),-3).fullDate
			// 	},
			// 	{
			// 		date: getDate(new Date(),-3).fullDate,
			// 	},
			// 	{
			// 		date: getDate(new Date(),-1).fullDate,
			// 	}
			// ]
			
		},
		onShow(){
			this.$postPointData({code:'600920', eventName:'into_page_cloud_play_back'})
		},
		methods: {
			
			//auto切换
			onAutoAction(){
				this.$postPointData({code:'600911', eventName:'click_cloud_play_back_auto',isFullScreen:this.isFullScreen})
				if(this.fitType == 'contain'){
					this.fitType = 'fill'
				}else if(this.fitType == 'fill') {
					this.fitType = 'contain'
				}
			},
			//全屏
			onfullScreenAction(){
				console.log('全屏---------111');
				this.isFullScreen = !this.isFullScreen
				if(this.isFullScreen){
					this.videoContext.requestFullScreen({
					    direction: 90,
					    success:(e)=> {
							console.log('全屏---------');
					        this.isFullScreen = true
					    }
					})
				}else{
					this.videoContext.exitFullScreen({
					    success:(e)=> {
							console.log('取消全屏---------');
					        this.isFullScreen = false
					    },
					})
				}
			},
			// 当视频进入和退出全屏时触发
			fullscreenchange(e){
				console.log('当视频进入和退出全屏时触发',e);
				this.isFullScreen = e.detail.fullScreen
				if(e.detail.fullScreen){
					this.direction = 90
					this.fitType = 'fill'
				}else this.direction = 0
			},
			
			//点击屏幕
			tapScreen(){
				console.log('点击屏幕======');
				this.isTap = !this.isTap
			},
			//获取云回放视频列表
			getVideoList(){
				uni.showLoading()
				const token = this.device.token;
				const data = {
					startTime:this.date +' '+'00:00:00',
					stopTime: this.date +' '+'23:59:59',
					sn:this.device.deviceNo
					
				};
				getApp().globalData.api.getCloudVideoList(data, token, (result) => {
					console.log('获取回放列表:', result);
					uni.hideLoading()
					let picData = []
					this.playBackUrlList = result.VideoArray || []
					if (this.playBackUrlList.length > 0) {
						this.playBackUrlList.forEach((item, index) => {
							// 播放状态：播放1，暂停0，停止-1
							// this.$set(item, 'status', -1)
							this.$set(item, 'key', index)
							if(index==0){
								item.selected = true
								this.$set(item, 'status', 1)
							}else{
								item.selected = false
								this.$set(item, 'status', 0)
							}
							picData.push({
								ObjName:(item.IndexFile.split('.')[0]) +'.jpeg',
								StorageBucket:item.StorageBucket
							})
							// this.info.selected.push({date:item.BeginTime.split(' ')[0]})
						})
						this.getVideoIcon(picData)
						
						let data1 ={startTime:this.playBackUrlList[0].StartTime,stopTime:this.playBackUrlList[0].StopTime} 
						this.getVideoUrl(data1,this.playBackUrlList[0])
					}else{
						this.currentVideo.url = ''
						this.currentVideo.key = ''
					}
				});
			},
			
			
			//获取云回放视频的缩略图
			getVideoIcon(data){
				let token = this.device.token
				getApp().globalData.api.getCloudVideoIcon(data,token,(result)=>{
					console.log(' 云回放视频缩略图',result);
					this.playBackUrlList = this.playBackUrlList.map((item, index) => {
						return {...item,imageUrl:result[index].url}
					})
				});
			},
			//获取云回放视频
			getVideoUrl(data,item){
				data.clientSystem = 'ios'//uni.getSystemInfoSync().osName=='ios'?'ios':undefined
				let token = this.device.token
				getApp().globalData.api.getVideoUrl(data,token,(result)=>{
					console.log(' 云回放视频',result);
					// this.currentVideo.url = result.url
					this.currentVideo.key = item.key
					let system = uni.getSystemInfoSync().osName
					if(system == 'ios'){
						wx.downloadFile({
							url: result.url, 
							success:(res)=>{
								console.log('下载视频到本地播放',res);
								if (res.statusCode === 200) {
									this.currentVideo.url = res.tempFilePath
								}
							},
							fail: (err) => {
								console.log('下载失败',err);
							}
						})
					}else{
						this.currentVideo.url = result.url
					}
				});
			},
			
			//选中某条播放视频
			itemClick(item){
				console.log('切换视频===',item,JSON.stringify(item));
				if(!item.selected){
					this.playBackUrlList.forEach((item2)=>{
						if(item2.key==item.key){
							item2.selected = true
							// item2.status = 1
							setTimeout(()=>{
								this.onPlay(item2)
							},1000)
						}else{
							item2.selected = false
							item2.status = 0
						}
					})
					let data = {startTime:item.StartTime,stopTime:item.StopTime} 
					this.currentVideo.key = item.key
					this.getVideoUrl(data,item)
				}else{
					uni.showToast({
						title:'正在播放该视频'
					})
				}
			},
			//静音 暂停 截图 全屏
			clickTool(index){
				if(index == 0){
					// 静音
					this.isMuted = !this.isMuted
					if(this.isMuted){
						this.toolList[index].src = 'https://statics.xmcsrv.net/weixin/soundoff1.png'
					}else{
						this.toolList[index].src = 'https://statics.xmcsrv.net/weixin/soundon1.png'
					}
					// checkState未知
					this.$postPointData({code:'600912', eventName:'click_cloud_play_back_voice',screen_orientation:this.isFullScreen,checkState:null})
				}else if(index==1){
					// 暂停播放
					this.isPlay = !this.isPlay
					this.changePlayOrPause()
					if(this.isPlay){
						this.videoContext.play()
						this.playBackUrlList.forEach((item2)=>{
							if(this.currentVideo.key == item2.key){
								item2.status = 1
							}
						})
					}else{
						this.videoContext.pause()
						this.playBackUrlList.forEach((item2)=>{
							if(this.currentVideo.key == item2.key){
								item2.status = 0
							}
						})
					}
				}else if(index==2){
					//全屏
					this.isFullScreen = !this.isFullScreen
					if(this.isFullScreen){
						this.videoHeight = (uni.getSystemInfoSync().windowHeight)*0.9 +'px'
						this.toolList[index].src = 'https://statics.xmcsrv.net/weixin/toolIcon4-1.png'
					}else{
						this.videoHeight = '526rpx'
						this.toolList[index].src = 'https://statics.xmcsrv.net/weixin/toolIcon4.png'
					}
				}
			},
			//切换暂停或播放
			changePlayOrPause(){
				if(this.isPlay){
					this.toolList[1].src = 'https://statics.xmcsrv.net/weixin/toolIcon1.png'
				}else{
					this.toolList[1].src = 'https://statics.xmcsrv.net/weixin/toolIcon1-1.png'
				}
			},
			// 点击播放
			onPlay(item) {
				console.log('点击播放：', item);
				if(Object.hasOwn(item, 'key')){
					this.playBackUrlList.forEach((oItem)=>{
						if(item.selected){
							if(item.key == oItem.key){
								oItem.status = 1
								this.videoContext.play()
							}	
						}
					})
				}else{
					this.playBackUrlList.forEach((oItem)=>{
						if(this.currentVideo.key == oItem.key){
							oItem.status = 1
							this.videoContext.play()
						}
					})
				}
				this.isPlay = true
				// 云回放首次播放
				this.isOncePlay+=1
				if(this.isOncePlay===1){
					this.$postPointData({code:'600921',eventName:'page_cloud_play_back_success'})
				}
				this.$postPointData({code:'600913', eventName:'click_cloud_play_back_play',screen_orientation:this.isFullScreen})
				// this.videoContext.play()
				this.changePlayOrPause()
			},
      onPlay2(item) {
        console.log('点击了播放2', item)
        this.playBackUrlList.forEach((oItem)=>{
          if(this.currentVideo.key == oItem.key){
            oItem.status = 1
          }
          this.isPlay = true
					this.$postPointData({code:'600913', eventName:'click_cloud_play_back_play',screen_orientation:this.isFullScreen})
          this.changePlayOrPause()
        })
      },
			onPause2(item){
				console.log('暂停播放2：', item);
        this.playBackUrlList.forEach((oItem)=>{
          if(this.currentVideo.key == oItem.key){
            oItem.status = 0
          }
        })
        this.isPlay = false
        this.changePlayOrPause()
			},
			// 暂停
			onPause(item) {
				console.log('暂停播放：', item);
				if(Object.hasOwn(item, 'key')){
					this.playBackUrlList.forEach((oItem)=>{
						if(item.selected){
							if(item.key == oItem.key){
								oItem.status = 0
								this.videoContext.pause()
							}
						}
					})
				}else{
					this.playBackUrlList.forEach((oItem)=>{
						if(this.currentVideo.key == oItem.key){
							oItem.status = 0
							this.videoContext.pause()
						}
					})
				}
				this.isPlay = false
				// this.videoContext.pause()
				this.changePlayOrPause()
			},
			//播放结束
			ended(ev) {
				console.log('播放结束：', ev, this.currentVideo);
				let index = 0
				if(this.currentVideo.key == this.playBackUrlList.length-1){
					index = 0
				}else index = this.currentVideo.key + 1
				
				let data = {startTime:this.playBackUrlList[index].StartTime,stopTime:this.playBackUrlList[index].StopTime}
				this.getVideoUrl(data,this.playBackUrlList[index])
				this.playBackUrlList.forEach((item)=>{
					if(item.key == index){
						item.selected = true
					}else item.selected = false
				})
				// this.onPlay()
			},
			//打开日历
			openCalendar(){
				this.$refs.calendar.open()
			},
			// 选中日历
			confirm(e) {
				console.log('confirm 返回:', e)
				this.date = e.fulldate
				this.$postPointData({code:'600910', eventName:'click_cloud_play_back_calender'})
				this.getVideoList()
			},
			
			// //刻度尺相关
			// rulerNum(value){
			//     this.NumValue = value
			//     console.log(value,'选中值value')
			// },
			// //分钟 小时
			// onClickItem(e){
			// 	console.log(e);
			// 	this.current = e.currentIndex
			// 	if(this.current == 0){
			// 		this.maxNum = 23
			// 	}else{
			// 		this.maxNum = 1440
			// 	}
			// 	this.getRulerList()
			// },
			
			/*
			// 一直请求直到请求成功（处理：渲染层网络层错误）
			keepRequestUntillRight(item) {
				console.log('=====一直请求直到请求成功=======');
				uni.request({
					method: 'GET',
					url: item.url,
					success: (res) => {
						if (res.statusCode == 200) {
							this.currentVideo = {
								key: item.key,
								url: item.url
							}
							item.status = 1
							this.videoContext = uni.createVideoContext('video')
						} else if (res.statusCode == 400) {
							uni.showModal({
								title: '提示',
								content: res.data,
								showCancel: false
							});
						} else {
							setTimeout(() => {
								this.keepRequestUntillRight(item);
							}, 1000);
						}
					},
					fail: (err) => {
						console.log('error:', err);
					}
				});
			}, */
			
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-calendar-item__weeks-box-text{
		    background: #F7F7F7;
		    width: 60rpx;
		    height: 60rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center
	}
	/deep/ .uni-calendar-item--isDay{
		background-color: #fff !important;
		opacity: 1;
		.uni-calendar-item__weeks-box-text {
			background: #007aff !important;
		}
	}
	/deep/ .uni-calendar-item__weeks-lunar-text{
			color: #007aff !important;
	}
	/deep/ .uni-calendar-item--checked{
		background-color: #fff !important;
		opacity: 1;
		color: orange;
		.uni-calendar-item__weeks-box-text {
			background: orange !important;
		}
	}
	.headerFixed{
		//position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
	}
	.header {
		width: 100vw;
		min-height: 526rpx;
		background: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.rightV{
		// width: 180rpx;
		// height: 90rpx;
		padding: 15rpx;
		position: fixed;
		right: 50rpx;
		top: 5rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		border-radius: 5rpx;
		background: rgba(0, 0, 0,0.5);
		.auto{
			border-radius: 5rpx;
			border: 1px solid #fff;
			padding: 5rpx 0;
			font-size: 22rpx;
			width: 80rpx;
			line-height: 36rpx;
			height: 36rpx;
			text-align: center;
			color: #FFFFFF;
			margin:0 20rpx;
		}
		.autoActive{
			color:#FF0025;
			border: 1px solid #FF0025;
		}
		.img{
			width: 40rpx;
			height: 40rpx;
			margin:0 20rpx;
		}
	}
	.fullToolBar{
		width: 500rpx;
		height: 100rpx;
		position: fixed;
		right: %50;
		bottom: 40rpx;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		border-radius: 5rpx;
		background: white;
		.img{
			width: 70rpx;
			height: 70rpx;
			margin-left: 30rpx;
		}
	}
	.toolBar{
		background: white;
		width: 100%;
		// height: 110rpx;
		padding: 20rpx 0;
		.imgV{
			flex: 1;
			// background: red;
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
		.jf-button {
			background: transparent;
			width: auto;
			margin: 0;
			line-height: 1.25;
		}
		.jf-button::after {
			border: none;
		}
	}
	.noData{
		margin-top: 680rpx;
	}
	.step{
		margin: 680rpx 30rpx 30rpx 30rpx;
		.con{
			flex-direction: row-reverse;
			display: flex;
		}
		.itemList{
			// padding: 40rpx;
			width: 100%;
			margin-right: 60rpx;
			margin-bottom: 120rpx;
			.title{
				background: #FF0025;
				width: 192rpx;
				height: 58rpx;
				border-radius: 12rpx;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: -50rpx;
				margin-top: 20rpx;
				z-index: 10;
			}
			.item{
				background: white;
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 1px solid #E8E8E8;
				margin-top: 20rpx;
				border-radius: 15rpx;
				width: 100%;
				.msg{
					color: #000000;
					font-weight: bold;
					font-size: 30rpx;
				}
				.all{
					color: #989898;
					font-size: 26rpx;
				}
				.pic{
					width: 202rpx;
					height: 114rpx;
				}
				.play{
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: 80rpx;
					top: 33rpx;
				}
				.time{
					color: #5A5A5A;
					font-size: 26rpx;
				}
				.type{
					color: #FF0025;
					font-size: 26rpx;
				}
			}
		}
		.line{
			background: #939393;
			width: 10px;
			position: relative;
			// height: 40rpx;
			margin-left: -40rpx;
		}	
		.step-container {
			/* #ifndef APP-NVUE */
			display: inline-flex;
			/* #endif */ 
			display: flex;
			width: 30px;
			flex-direction: column;
		}
		
		.step-line-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			flex: 1;
			align-items: center;
			justify-content: center;
		}
		.step-line {
			width: 1px;
			background: #D9D9D9;
		}
		.step-line--after {
			flex: 1;
			transform: translate(0px, -16px);
		}
		.step-line--after2 {
			transform: translate(0px, 40px);
		}
		.step-line--after3 {
			transform: translate(0px, -45px);
		}
		.step-line--before {
			height: 20rpx;
			width: 20rpx;
			background: #FF0025;
			border-radius: 10rpx;
			position: absolute;
			left: 45rpx;
			z-index: 10;
		}
		.step-circle {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #FF0025;
			margin: 4px 0px 5px 0px;
		}
		.step-check {
			height: 14px;
			line-height: 14px;
			margin: 2px 0px;
		}
		
	}
	.rule{
		margin-top:100rpx ;
	}
	.calendar{
		z-index: 10;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 50rpx;
		// width: 692rpx;
		height: 84rpx;
		background: rgba(18, 181, 176);
		border-radius: 15rpx;
		color: white;
		margin:10rpx auto;
		image{
			width: 40rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	.bottom{
		// position: fixed;
		// bottom: 60rpx;
		// left: 30rpx;
		// right: 30rpx;
		margin: 60rpx 30rpx 30rpx 30rpx;
		image{
			width: 30rpx;
			height: 30rpx;
		}
		text{
			color: #000000;
			opacity: 0.6;
			font-size: 30rpx;
		}
		.active{
			
		}
	}
	.video-list {
		width: 100vw;
		height: 40vw;
		white-space: nowrap;
		//margin-top: 650rpx;
	}

	.video {
		display: inline-block;
		// width: 30vw;
		// height: 30vw;
		width: 25vw;
		height: 20vw;
		overflow: hidden;
		border: 1px solid #999999;
		margin: 20rpx;
		// background: url('https://statics.xmcsrv.net/weixin/defaultMsgBg2.png') ;
		// transform: rotate(180deg);
		// opacity: 0.8;
	}

	.video-control {
		position: relative;
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		.bgPic{
			width: 100%;
			height: 100%;
			opacity: 0.15;
			position: absolute;
		}
		.pic{
			width: 202rpx;
			height: 100%;
			position: absolute;
			margin: auto;
		}
		.time{
			position: absolute; 
			top: 10rpx; 
			font-size: 18rpx; 
			text-align: center;
			z-index: 2;
			color:white;
		}
	}

	.video-nothing {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>
